<template>
  <!-- 规则 -->
  <u-popup
    :value="show"
    :closeable="true"
    @close="close"
    border-radius="16"
    mode="center"
    width="602rpx"
    height="688rpx"
  >
    <view class="content u-p-l-30 u-p-r-30 u-p-t-32 u-p-b-40">
      <view class="u-text-center font-32 font-weight-500">{{ title }}</view>
      <scroll-view scroll-y="true" style="height: 480rpx;">
        <u-parse :html="rule"></u-parse>
      </scroll-view>
      <view class="footer-primary-btn flex-center" @click="close"> {{ confirmText }} </view>
    </view>
  </u-popup>
</template>

<script>
  /**
	 * 规则弹窗
	 * <rule-pop
			:show.sync="show_rule"
			title="成长值规则"
			:rule="user_info.integral_rule"
			confirm-text="我知道了"
		 />
	 */
  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: '',
      },
      rule: {
        type: String,
        default: '',
      },
      confirmText: {
        type: String,
        default: '我知道了',
      },
    },
    data() {
      return {}
    },
    methods: {
      open() {
        this.$emit('update:show', true)
      },
      close() {
        this.$emit('update:show', false)
      },
      // 点击确认按钮
      confirm() {
        this.close()
        this.$emit('confirm')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pop-box {
    width: 462rpx;
    height: 316rpx;
  }

  .btn {
    width: 190rpx;
    height: 72rpx;
    line-height: 70rpx;
    border-radius: 36rpx;
  }

  .cancel-btn {
    background: #fff;
    border: 2rpx solid rgba(51, 51, 51, 1);
  }

  .confirm-btn {
    color: #fff;
    background: var(--color);
  }
</style>
